<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        body{
            margin: 0;
        }
        .box1{
            /*如果设置这样的属性后，现在的 width和 height代表的盒子实际占据的空间的大小，并不是内容的宽度和高度，当写 border和padding的时候，会把内容压缩，使其不超过我们写的 width和height 盒子会紧缩。*/
            box-sizing: border-box;

            width: 100px;
            height: 100px;
            background-color: red;
            /*默认情况下，我们设置盒子的border和padding导致盒子外扩，变大，这里的 width和height指的是内容的宽和高。并不是盒子整体占据的空间大小。盒子占据的整体的空间大小
            宽度：内容宽度width + pading-left + pading-right + border-left + border+padding
            */
            border: 10px solid gold;
            padding: 20px;
            /*margin: 50px;*/

            /*设置 border padding margin 都是代表的四个方向上的设置*/
            /*margin-bottom: 50px;*/

        }
        .box2{
            margin-top: 100px;

            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box1">内容</div>
    <div class="box2"></div>
</body>
<script type="text/javascript">

</script>

</html>
